```
## Add / Remove Media
### Add Media(s)
To add multiple media to an ongoing call, the `call.addMedia` API can be used. Our `addMedia` function shown below (triggered when the user clicks "Add Media"), adds the specified media track(s) to the Call and sends the media(s) to the remote participant(s) by using the `call.addMedia` API.
```javascript
/*
* Add media on ongoing Call functionality.
*/
function addMedia () {
log('Adding media track(s) to ongoing call' + callId)
const withAudioBox = document.getElementById('make-with-audio')
const withVideoBox = document.getElementById('make-with-video')
const withScreenBox = document.getElementById('make-with-screen')
const media = {
audio: withAudioBox.checked,
video: withVideoBox.checked,
screen: withScreenBox.checked
}
client.call.addMedia(callId, media)
// Reset the checkboxes afterwards.
withAudioBox.checked = false
withVideoBox.checked = false
withScreenBox.checked = false
}
```
### Remove Media(s)
To remove media from an ongoing, when the user clicks on the 'Remove Media' button, our `removeMedia` function will:
1. Retrieve the information of the ongoing call
2. Create a list of media track IDs that we want to remove.
3. Use the `call.removeMedia` API to remove the tracks from the call and stop being sent to the remote participant(s).
Similarly to the `call.addMedia` API, this API can also be used to remove multiple tracks
```javascript
/*
* Remove media(s) from ongoing Call functionality.
*/
function removeMedia () {
log('Removing media track(s) to ongoing call' + callId)
let checkBoxes = document.getElementsByName('removeMedia')
// Get the list of IDs with checked checkboxes.
const trackIds = getAllCheckedTracks()
client.call.removeMedia(callId, trackIds)
}
```
## Events
## Events
The media events for handling tracks on a call fall into three categories:
1. Track Rendering: The `call:tracksAdded` and `call:tracksRemoved` events let the application know when tracks are available to be rendered or need to be unrendered.
2. Media Issues: The `media:sourceMuted` and `media:sourceUnmuted` events let the application know when a track is having a media interruption, such as a network issue.
3. Track Loss: The `media:trackEnded` event lets the application know when a track has unexpectedly ended and needs to be handled.
### Track Rendering
The `call:tracksAdded` and `call:tracksRemoved` events will be emitted once per call operation, either initiated locally or remotely, and will include the list of tracks that have been added or removed due to that operation. A track being added to a call means that its media is available to be rendered. A track being removed from a call means that it is no longer available to be rendered.
For our demo application, we will handle these events be rendering or unrendering the tracks as appropriate. For local tracks that are added to the call, we will also show a UI element that lets the user remove them from the call if desired. Below are the event listeners we will implement to handle the events and hand off the tracks to the functions to perform these actions.
```javascript
/**
* When new tracks are added to the call, we want to render them.
* For local tracks, we also want to add a UI element so we can remove them.
*/
client.on('call:tracksAdded', function (params) {
const { trackIds } = params
trackIds.forEach(trackId => {
const track = client.media.getTrackById(trackId)
// Render the track's media.
renderTrack(track)
// Add UI controls to remove local tracks from the call.
if (track.isLocal) {
addTrackControls(track)
}
})
})
/**
* When tracks are removed from the call, we want to unrender them.
* For local tracks, we also want to remove the UI element we previously added.
*/
client.on('call:tracksRemoved', function (params) {
const { trackIds } = params
// Iterate over each trackId to determine how to unrender it.
trackIds.forEach(trackId => {
const track = client.media.getTrackById(trackId)
// Unrender the track from the page.
removeTrack(track)
// Remove the UI controls for the local track.
if (track.isLocal) {
removeTrackControls(track)
}
})
})
```
To render and unrender the tracks, we simply use the `media.renderTracks` or `media.removeTracks` APIs. We will render all tracks in either the local or remote HTML containers. It should be noted that we are not rendering local audio tracks since we do not want the user to hear themselves speaking.
```javascript
/*
* Function that renders a track.
* @param {Track} track The Track object retrieved from the SDK.
*/
function renderTrack (track) {
if (track.isLocal) {
// Only render local video into the local container. The user does not need
// to hear themselves speak.
if (track.kind === 'video') {
client.media.renderTracks([track.trackId], '#local-container')
}
} else {
// Render all remote media into the remote container.
client.media.renderTracks([track.trackId], '#remote-container')
}
}
/*
* Function that unrenders a track.
* @param {Track} track The Track object retrieved from the SDK.
*/
function removeTrack (track) {
// Check whether the ended track was a local track or not.
if (track.isLocal) {
if (track.kind === 'video') {
// Remove the video track from the local container.
// Local audio tracks were not rendered by the renderTrack function.
client.media.removeTracks([track.trackId], '#local-container')
}
} else {
// Remove the track from the remote container.
client.media.removeTracks([track.trackId], '#remote-container')
}
}
```
For local tracks added to the call, we want the user to be able to remove them from the call. We will show a list of all local tracks, allowing the user to check the tracks they want to be removed before calling the `call.removeMedia` API. Below are the functions we will use to add the UI elements to the page, to remove the UI elements from the page afterwards, and to get the list of all selected tracks.
```javascript
/*
* Function to add UI elements for removing a local track from the Call.
* @param {Track} track The Track object retrieved from the SDK.
*/
function addTrackControls (track) {
if (!track.isLocal) {
// We only want to add controls for local tracks.
return
}
const controlsId = 'controls-' + track.trackId
if (document.getElementById(controlsId)) {
// Controls already exist for this track.
return
}
const controls = document.createElement('div')
controls.id = controlsId
const checkbox = document.createElement('input')
checkbox.type = 'checkbox'
checkbox.id = track.trackId
checkbox.name = 'local-track'
const label = document.createElement('label')
label.innerHTML = track.kind + 'track (' + track.trackId + ')'
controls.appendChild(checkbox)
controls.appendChild(label)
const trackList = document.getElementById('localTrack-controls')
trackList.appendChild(controls)
}
/*
* Function to remove UI elements used for removing a local track from the Call.
* @param {Track} track The Track object retrieved from the SDK.
*/
function removeTrackControls (track) {
if (!track.isLocal) {
return
}
const controlsId = 'controls-' + track.trackId
const controls = document.getElementById(controlsId)
if (controls) {
const trackList = document.getElementById('localTrack-controls')
trackList.removeChild(controls)
} else {
// Track controls don't exist for this track.
}
}
/*
* Function to get the IDs of all checked checkboxes for local tracks.
* @return {Array